<template>
	<rx-dialog @ok="handleSubmit" @cancel="cancel">
		<rx-layout>
            <template #middle>
				<a-button-group style="margin-bottom: 5px;">
					<a-button class="abutton" @click="addParams">
						<rx-icon-show icon="icon-lineVue3_add"></rx-icon-show>
					</a-button>
					<a-button class="abutton" @click="delParams">
                        <rx-icon-show icon="icon-lineVue3_delete"></rx-icon-show>
					</a-button>
				</a-button-group>
				<a-table
					:dataSource="params"
					:pagination="false"
					:rowSelection="receiveRowSelection"
					rowKey="idx_"
					:columns="columns"
					:bordered="true"
				>
                    <template #labelTitle>
                        <span ><span style="color: red;" >* </span>{{i18n('paramConfig.paramName','参数名称')}}</span>
                    </template>
                    <template #valueTitle>
                        <span ><span style="color: red;" >* </span>{{i18n('paramConfig.paramAlias','参数别名')}}</span>
                    </template>
                    <template #bodyCell="{ column,record }">
                        <template v-if="column.dataIndex === 'label'">
                            <a-input v-model:value="record.label"></a-input>
                        </template>
                        <template v-if="column.dataIndex === 'value'">
                            <a-input v-model:value="record.value" @blur="valueChange(record)"></a-input>
                        </template>
                    </template>
				</a-table>
			</template>
		</rx-layout>
	</rx-dialog>
</template>

<script>
import {Util,RxLayout,RxDialog} from "@lowcode/jpaas-base-lib";
import {cloneDeep} from 'lodash-es';

export default {
    name: "paramConfigDef",
	components:{
		RxLayout,
		RxDialog
	},
    props: ['destroy',"paramConfig"],
    data() {
        return {
            columns:[
                {
                    dataIndex: 'label',
                    key: 'label',
                    slots: { title: 'labelTitle' }
                },
                {
                    dataIndex: 'value',
                    key: 'value',
                    slots: { title: 'valueTitle' }
                },
            ],
            params:[],
            selectedRowKeys:[]
        }
    },
    computed: {
        receiveRowSelection() {
            return {
                selectedRowKeys: this.selectedRowKeys,
                onChange: this.onSelectChange,
            }
        },
    },
    created() {
		this.params=cloneDeep(this.paramConfig) || [];
    },
    methods: {
		i18n(name,text,key){
			return this.$ti18(name,text,"pageStyleLang",key);
		},
        onSelectChange(selectedRowKeys) {
            this.selectedRowKeys = selectedRowKeys
        },
        addParams(){
            this.params.push({
                idx_: Util.randomId(),
                label:"",
                value:""
            })
        },
        delParams(){
            for(let i=this.params.length-1;i>=0;i--){
                let row=this.params[i];
                if(this.selectedRowKeys.includes(row.idx_)){
                    this.params.splice(i,1);
                }
            }
            this.selectedRowKeys=[];
        },
        valueChange(record){
            let param=this.params.find(item=>{
                if(item.idx_!= record.idx_ &&  item.value==record.value){
                    return true;
                }
                return false;
            })
            if(param){
				this.$message.warning(this.i18n('paramConfig.paramAlias','参数别名')+'【'+record.value+'】'+this.i18n("paramConfig.alreadyExist","已存在!"));
                record.value="";
            }
        },
		handleSubmit(vm) {
			let param=this.params.find(item=>{
				if(!item.value || !item.label){
					return true;
				}
				return false;
			})
			if(param){
				let message=this.i18n("msa.paramNameTips","参数名称不能为空!");
				if(!param.value){
					message=this.i18n("msa.paramAliasTips","参数标识不能为空!");
				}
				this.$message.warning(message);
				vm.loading=false;
				return;
			}
			Util.closeWindow(this, "ok",this.params);
		},
		cancel() {
			Util.closeWindow(this, "cancel");
		},
    }
}
</script>

<style scoped>

</style>
